<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <title>$gear['name']</title>
    <link rel="stylesheet" href="/static/css/base.css?v={$staticVersion}"/>
    <link rel="stylesheet" href="/static/css/equip.css?v={$staticVersion}"/>
    <link rel="stylesheet" href="/static/lightbox2/css/lightbox.css?v={$staticVersion}" />

</head>
<style>
.style-select span{display:block;height:20px;overflow: hidden;}
.comment-list span{font-size:12px;}
.slide2{
    position: relative;
    overflow: hidden;
    height:300px;
}
.slide2:after{
    content: '';
    display: block;
    width: 100%;
    padding-top: 50%;
}
.slide2 ul{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.slide2 li{
    text-align: center;
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
}
/* 解决js阻塞页面显示首屏 */
.slide2 li:first-child{
    z-index: 1;
}
.slide2 li img{
    width: 300px;
    height: 300px;
    border: none;
}
.slide2 .dot{
    position: absolute;
    width: 100%;text-align: center;
    left:0;
    bottom: 10px;
    z-index: 5;
    font-size: 0;
}
.slide2 .dot span{
    display: inline-block;
    background: #ccc;
    width: 15px;
    height: 2px;
    border-radius: 0;
    box-shadow: none;
    margin:5px;
}
.slide2 .dot .cur{
    background-color: #30c5e2;
}
             
</style>
<body class="pb50">
    <section class="mb10 equip-box p10 line-gray-bottom det-focus">
        <div class="slide2" id="slide3"> 
            <ul>
                {loop $gear['images'] $k $v}
                    <li>
                        <img src="{$v}" alt="" />
                    </li>
                {/loop}
            </ul>
            <div class="dot">
                {loop $gear['images'] $k $v}
                <span></span>
                {/loop}
            </div>
        </div>
        <p class="color_dakgray f16 omit bold p10 mt5">{$gear['name']}</p>
        <!-- 装备名字 -->
        <div class="wantbox">
            <i id="iwant" class="star" data-id="{$gear['gearId']}" data-action="query"></i>
            <span class="vm dib f14 color_gray" style="vertical-align: text-top;"><em>{$gear['likes']}</em>人已收藏</span>
            <p class="fr color_gray mt10">
                售价
                <span class="color-red">{eval echo $gear['currency']?'$':'￥'}{$gear['price']}</span>
                <a class="buy bg-red headerbuy" href="#buybuylist" style="display:none">购买</a>
            </p>
        </div>
        <!-- 收藏 购买 -->
    </section>
    <!-- 装备基础信息展示区 -->
    {if $gear['shortDesc']}
    <p class="more-detail" style="line-height:19px;">
        {$gear['shortDesc']}
        <a href="/show/gearPp?gearId={$gear['gearId']}">详情 〉</a>
    </p>
    {/if}
    <!-- 详情跳转 -->
    <div id="buybuylist">
    {if $styleList}
        <ul id="style_list" class="tag-list line-gray-bottom" ></ul>
        <!-- 配色区域 -->
        {if $gear['catId']==1}<a class="btn-size">筛选尺寸</a>{/if}
    {else}
        <dl class="comment-list">
            <dt class="blue-line">购买</dt>
        </dl>
    {/if}
    </div>
    <!-- 筛选尺寸按钮 -->
    <ul class="buy-list"></ul>
    <a class="more-buy open">展开更多购买渠道</a>
    <a class="more-buy close" style="display: none">收起</a>
    <!-- 购买渠道列表 -->
    
    <dl class="comment-list buylistempty" style="display: none">
        <dt class="blue-line">购买</dt>
        <div class="empty">
           <img src="/static/images/img/wqd.png"><br/>
        </div>

    </dl>
    
    <dl class="comment-list">
    {if $commentList}
        <dt class="blue-line">
            评论
            <a class="color_gray f14 fr" href="/show/moreComments?gearId={$gear['gearId']}" id="allcomment">查看所有评论</a>
        </dt>
        {if $commentList}
        {loop $commentList $k $comment}
        <dd>
            <ul>
            <a href="joggers://profile/{$comment['uid']}"><img src="{$comment['header']}"></a>
            <ul class="summary" style="line-height: 18px;">
                <li>
                    <a href="joggers://profile/{$comment['uid']}">{$comment['nickname']}</a>
                    <p class="color_gray">
                        <span class="you usefull" data-id="{$comment['commentId']}">有用 <em>{$comment['usefull']}</em></span>
                        <span class="no nouse" data-id="{$comment['commentId']}">没用 <em>{$comment['nouse']}</em></span>
                    </p>
                </li>
                <li class="time color_gray f10">{$comment['dateformat']}</li>
                <li class="f14 color_dgray">{$comment['content']}</li>
                {if $comment['thumbImg']}
                <li class="img-list">
                  {loop $comment['thumbImg'] $imgKey $img}
                    {if $img}<a href="{$img}" data-lightbox="img_set_{$comment['commentId']}"><img src="{$img}" alt=""/></a>{/if}
                  {/loop}
                </li>
                {/if}
            </ul>
        </dd>
        {/loop}
        {/if}
    {else}
    <dt class="blue-line">评论</dt>
    <dd class="empty">
       <img src="/static/images/img/wpl.png"><br/>
    </dd>
    {/if}
    </dl>

    <!-- 评论区 -->
    <a class="say-btn" href="joggers://gearRating/{$gearId}">
        <img src="/static/images/icon/pen.png">
        我来说两句
    </a>
    <!-- 书写评论按钮 -->
    {if $similarGear}
    <h5 class="blue-line line-gray f16">猜你喜欢</h5>
    <ul class="youlike" style="line-height: 18px;">
      {loop $similarGear $k $v}
        <li>
            <a href="equipment?gearId={$v['gearId']}&_track=detailrecommend">
            <img src="{$v['image']}" alt=""/>
            <h6 class="f14 color_dgray omit">{$v['name']}</h6>
            <p class="omit color_gray f12 mt5">{$v['shortDesc']}</p>
            <p class="color_red f12 mt10">
                <span class="color-red f14">￥{$v['price']}</span>
                <span class="color_gray fr">热度：{$v['viewCounts']}</span>
            </p>
            <a class="buy" href="equipment?gearId={$v['gearId']}">购买</a>
            </a>
        </li>
      {/loop}
    </ul>
    {/if}
    <!-- 猜你喜欢 -->
<div class="back-top"></div>
<div class="masklayer sizefilterbox" style="display:none ">
    <div class="mui-popup mui-popup-in">
      <div class="mui-popup-inner">
        <div class="mui-popup-title">
            <span>-- </span>
            选择需要的尺码 
            <span>--</span>
        </div>
        <div class="mui-popup-text">
          <div id="dialog_container">
            <div class="dialog_div">
              <button type="button" class="mui-btn" data-size="35.5">35.5及以下</button>
              <button type="button" class="mui-btn" data-size="36">36</button>
              <button type="button" class="mui-btn" data-size="36.5">36.5</button></div>
            <div class="dialog_div">
              <button type="button" class="mui-btn" data-size="37">37</button>
              <button type="button" class="mui-btn" data-size="37.5">37.5</button>
              <button type="button" class="mui-btn" data-size="38">38</button>
              <button type="button" class="mui-btn" data-size="38.5">38.5</button></div>
            <div class="dialog_div">
              <button type="button" class="mui-btn" data-size="39">39</button>
              <button type="button" class="mui-btn" data-size="39.5">39.5</button>
              <button type="button" class="mui-btn" data-size="40">40</button>
              <button type="button" class="mui-btn" data-size="40.5">40.5</button></div>
            <div class="dialog_div">
              <button type="button" class="mui-btn" data-size="41">41</button>
              <button type="button" class="mui-btn" data-size="41.5">41.5</button>
              <button type="button" class="mui-btn" data-size="42">42</button>
              <button type="button" class="mui-btn" data-size="42.5">42.5</button></div>
            <div class="dialog_div">
              <button type="button" class="mui-btn dialog_button" data-size="43">43</button>
              <button type="button" class="mui-btn" data-size="43.5">43.5</button>
              <button type="button" class="mui-btn" data-size="44">44</button>
              <button type="button" class="mui-btn" data-size="44.5">44.5</button></div>
            <div class="dialog_div">
              <button type="button" class="mui-btn" data-size="45">45</button>
              <button type="button" class="mui-btn" data-size="45.5">45.5</button>
              <button type="button" class="mui-btn" data-size="46">46</button>
              <button type="button" class="mui-btn" data-size="46.5">46.5</button></div>
            <div class="dialog_div">
              <button type="button" class="mui-btn" data-size="47">47</button>
              <button type="button" class="mui-btn" data-size="47.5">47.5</button>
              <button type="button" class="mui-btn" data-size="48">48及以上</button></div>
          </div>
        </div>
      </div>
      <div class="mui-popup-buttons">
        <span class="mui-popup-button mui-popup-button-bold">确定</span>
      </div>
    </div>
</div>

<div class="masklayer sizefilterbox2" style="display:none;z-index:99; ">
 <div class="mui-popup mui-popup-in">
     <div class="mui-popup-inner">
         <div class="mui-popup-text msg"></div>
     </div>
     <div class="mui-popup-buttons">
        <span class="mui-popup-button mui-popup-button-bold">确定</span>
     </div>
</div>
</div>
</body>
<script src="/static/js/show/zepto.min.js"></script> 
<script src="/static/lightbox2/js/lightbox-plus-jquery.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/swipeSlide.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/template-native.js?v={$staticVersion}"></script>
<script src="/static/js/run_main2.js?v={$staticVersion}"></script>
<script src="/static/js/show/gear.js?v={$staticVersion}"></script>

<script id="t-style-list" type="text/html">
    <li class="<%if (style_id==0){%>on <%}%>style-select" data-style-index="-1">全部</li>
    <%for(var i=0; i<styles.length;i++){%>
    <li class="<%if (style_id==styles[i]['style_id']){%>on <%}%>style-select" data-style-index="<%=i%>">
        <img src="<%=styles[i]['pic']%>">
        <span><%=styles[i]['name']%></span>
        <%if (i==3){%><a id="style-more" class="open">更多</a><%}%>
    </li>
    <%}%>
    <%if(i>3){%>
    <li><a class="open" id="style-less">收起</a></li>
    <%}%>
</script>
<script id="t-buy-list" type="text/html">
    <%for(var i=0; i < goods.length; i++) {%>
    <li>
        <a href="<%=goods[i].url%>" onclick="trackevent('gearchannel','-')">
        <%if(goods[i].istop){%>
        <i class="icon"><%=goods[i].topname%></i>
        <%}%>
        <img src="<%=goods[i].pic%>">
        <h6 class="mb10 omit"><%=goods[i].name%></h6>
        <p class="omit color_gray f12 mb5"><%=goods[i].description%></p>
        <p class="color_gray f12">
        <%if(!style_id){%>
            <%if(goods[i].sku_sizes>0){%>
                <%=goods[i].sku_sizes%>个尺寸 
            <%}%>
            <%if(goods[i].sku_colors>0){%>
                <%=goods[i].sku_colors%>个配色
            <%}%>
        <%}else{%>
            <%=goods[i].sku_sizes_str%>
        <%}%>
        </p>
        <span class="color-red">￥<%=goods[i].price%></span>
        <span class="<%=goods[i].button_class%>"><%=goods[i].button%></span>
        </a>
    </li>
    <%}%>
</script>
 

<script type="text/javascript">
var isNewVersion = $isNewVersion;
var msg = {};
var page = 1
var style_id = 0;
var size = 0;
var styles = {$styleJson};


if(isNewVersion){
    var arr = [];
    $('#slide3 img').each(function(){
        arr.push($(this).attr('src'));
    });
    $('#slide3 img').on('click',function(){
        var current = $(this).attr('src');
        if(typeof jw === "object" ) {
            jw.api('lightbox', JSON.stringify({
                "current": current,
                "url": arr
            }), '')
        }
    });
}

$(function(){
    refreshStyles();
    refreshChannel();
    $(".more-buy.open").click(refreshChannel);
    $('.more-buy.close').on('click',function(){
        var k = 0;
        $('.buy-list li').each(function(){
            if(k++>4){
                $(this).remove();
            }
        });
        $(this).css('display','none');
        $('.more-buy.open').show()
        page=2;
    });
})
if($('#slide3 li').length>1){
    $('#slide3').swipeSlide({
            continuousScroll:true,
            autoSwipe:false,
            speed : 3000,
            transitionType : 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',
            firstCallback : function(i,sum,me){
                me.find('.dot').children().first().addClass('cur');
            },
            callback : function(i,sum,me){
                me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
            }
    });
}else{
    $('#slide3 .dot span').css('display','none');
}

function h5alert(msg){
    if(isNewVersion && typeof jw === "object"){
        jw.api('alert', JSON.stringify({
            "title": msg,
            "button": '确定'
        }), '')
    }else {
        $('.masklayer').css('display', 'none');
        $('.sizefilterbox2 .msg').html(msg);
        $('.sizefilterbox2').css('display', 'block');
        $('.sizefilterbox2 .mui-popup-button').on('click', function () {
            $('.masklayer').css('display', 'none');
            $('.sizefilterbox').css('display', 'block');
        });
    }
}

function refreshChannel(){
    var goods_id = {eval echo empty($gear['goods_id']) ? 0 :$gear['goods_id']};
    $.getJSON('/gearWeb/getChannel',{"goods_id":goods_id,"gearId":{$gear['gearId']},"page":page,"style_id":style_id,"size":size},function(data){
        if(typeof data.error != 'undefined'){
            return
        }
        if(!data.result.goods.length && size){
            h5alert('暂无'+size+'尺码');
        }
        $('.sizefilterbox').css('display','none');
        if(data.result.has_more){
            $('.more-buy.open').show()
        }else{
            $('.more-buy').hide()
            if(page!=1){
                $('.more-buy.close').css('display','');
            }
        }
        var html = template('t-buy-list',{"goods":data.result.goods,"style_id":style_id});
        if(page>1){
            html = $('.buy-list').html() + html
        }
        if(page==1&&data.result.goods==0){
            $('.buy-list').html('<div class="empty"><img src="/static/images/img/wqd.png"><br/></div>');
            if(size==0){
                $('.btn-size').css('display','none');
            }else{
                $('.btn-size').css('display','');
            }
        }else{
            if(style_id==0){
                $('.headerbuy').css('display','');
            }
            $('.buy-list').html(html);
            $('.btn-size').css('display','');
        }
        page++;
    })
}

function refreshStyles(){
    $("#style_list").html(template('t-style-list',{"styles":styles,"style_id":style_id}))
    var liHight = $(".style-select").width();
    if(!liHight)
            return;
    var widthLI = liHight+20
    //  var h = liHight.style.height;
    $("#style_list").css('height',widthLI+"px")
    $(".style-select").click(function(){
        style_index = $(this).data('style-index')
        if(style_index=="-1"){
            style_id = 0
        }else if(style_index>3){
            var tmp = styles[style_index]
            style_id = tmp.style_id
            styles.splice(style_index,1)
            styles.splice(0,0,tmp)
        }else{
            style_id = styles[style_index].style_id
        }
        page = 1
        size = 0
        refreshStyles();
        refreshChannel();
        $('#style_list').height(widthLI)
        $('#style-more').show()
        trackevent('gearstyle','-');
    })
    $('#style-more').click(function(event){
        event.stopPropagation();
        $('.tag-list').height('auto')
        $(this).hide()
    })
    $('#style-less').click(function(){
        $('.tag-list').height(widthLI)
        $('#style-more').show();
    })
}

var isIwant = false;
//装备，想要
$('#iwant').on('click',function(){
    if(isIwant){
        return;
    }
    isIwant = true;
    var _this = $(this);
    var gid=$(this).attr('data-id');
    var action=$(this).attr('data-action');
    $.ajax({
        data:{gid:gid,action:action},
        url:'/show/likes',
        type:'post',
        success:function(res){
            isIwant=false;
            if(action=='query'){
                $(_this).attr('data-action',(res==1?'del':''));
                if(res==1){
                    $(_this).addClass('on');
                }
                return;
            } 
            if(res >= 0){
                if(action=='del'){
                    $(_this).attr('data-action','');
                    $(_this).removeClass('on');
                    toast('已取消收藏');
                    $('.wantbox em').html(res);
                } else{
                    $(_this).attr('data-action','del');
                    $(_this).addClass('on');
                    toast('已收藏');
                    $('.wantbox em').html(res);
                }
            } else if(res == -1) {
                location.href="joggers://login/";
            } 
        }
    })
});
$('#iwant').click();
$('.sizefilterbox .mui-btn').on('click',function(){
    $('.sizefilterbox .mui-btn').removeClass('mui-btn-primary');
    $(this).addClass('mui-btn-primary');
    size = $(this).data('size');
}); 
$('.masklayer').on('click',function(){
    $('.masklayer').css('display','none');
    $('.sizefilterbox').css('display','');
});
$('.mui-popup').on('click',function(){
    return false;
})
$('.sizefilterbox .mui-popup-button').on('click',function(){
    if(size==0){
        h5alert('请选择一个尺码');
        return;
    }
    page = 1
    refreshChannel();
    $('.sizefilterbox').css('display','block');
});

$(".btn-size").on('click', function() {
    size = 0;
   $('.sizefilterbox .mui-btn').removeClass('mui-btn-primary');
   $('.sizefilterbox').css('display','block');
});

$(window).scroll(function(){
    var sc=$(window).scrollTop();
    var rwidth=$(window).width()+$(document).scrollLeft();
    var rheight=$(window).height()+$(document).scrollTop();
    if(sc>0){
        $(".back-top").css("display","block");
        // $(".back-top").css("left",(rwidth-80)+"px");
        // $(".back-topp").css("top",(rheight-120)+"px");
    }else{
        $(".back-top").css("display","none");
    }
});
$(".back-top").click(function(){
    $('body,html').animate({scrollTop:0},300);
});
 var sup = typeof jw === "object";
  if(typeof jw == "object") {
    jw.api('copy_current_url', JSON.stringify({'status': false}));
    jw.api('share_button', JSON.stringify({'status': true}));
    jw.api('set_share_info', JSON.stringify({
      'title': '{$shartName}',
      'description':'{$shartDesc}',
      'img_url':'{$firstImage}',
      //'link_url':'{$staticHost}/show/equipment?gearId={$gear["gearId"]}',
    }));
  }

</script>
{template 'show/web-gearfooter'}
<script type="text/javascript">
    if(typeof jw === "object" ) {
        jw.api('wv_setnav', JSON.stringify({
            "title": '',
            "nav": getNav([$shopcart,1])
        }), '')
    }
</script>